<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
            line-height: 40px;
            border: 1px dashed #333;
        }

        .wrap {
            margin-bottom: 40px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <p class="one" ref="one">count: {{count}}</p>
        <p class="two" ref="one">count: {{count}}</p>
        <p class="three" ref="one">count: {{count}}</p> -->


        <p :class="'one-'+item" v-for="item in 10" :key="item" ref="one">count: {{count}}</p>
        
        <p>
            <button @click="count++">count++</button>
        </p>
    </div>
</body>
<script>
    /* 
        问: 数据更新后, 页面中的元素内容是否会立即更新
    
    */
    
    var vm = new Vue({
        el: "#app",
        data: {
            count: 100,
        },
        methods: {
            
        },
        watch: { // 配置侦听器(对象)
            count:function(newVal,oldVal){
                // 数据更新
                console.log("count更新了",newVal,oldVal);


                /* 
                    元素是否更新?  => Vue中如何获取元素
                    1. 借助传统的原生js方法获取元素  => 可以,但是不准确


                    2. Vue中提供了从当前模板获取元素的操作 =>  ref属性(对应ref名获取元素)
                    a. 给需要获取的元素绑定ref属性,  属性值即为ref名
                    b. 对应ref名获取元素  => Vue在初始化渲染阶段,会自动判断元素是否存在ref属性,如果存在就会对应ref名,将该元素存储到Vue实例的$refs对象中

                    注意:
                        1. 默认情况下,如果有多个元素拥有相同的ref名,后面的会覆盖前面的(只存储最后一个)
                        2. 在v-for中使用ref属性时, 会将相同ref名的元素,整合到一个数组中,在对应ref名存储到Vue实例的$refs对象中
                        3. 在Vue中不仅可以对应ref名获取元素, 也可以对应ref名获取Vue中的某个组件 !!!

                */

                // var one = document.getElementsByClassName("one")[0];
                // var one = document.querySelector("#app .one");
                // console.log(one);

                console.log(this);
                console.log(this.$refs.one);


            }

        }

    })



</script>

</html>